<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.icon-qzone{
				width: 25px;
				height: 25px;
				background-color: red;
				background-image: url("https://mat1.gtimg.com/pingjs/ext2020/qqindex2018/dist/img/icons.png");
				/* 取图片的位置 */
				background-position: 0 -100px;
				/* 动画效果 all 代表应用在所有属性上 0.5代表执行时长  */
				transition: all 0.5s; 
			}
			.icon-qzone:hover{
				background-position: 0 -150px;
			}
			.icon-email{
				width: 25px;
				height: 25px;
				background-image: url("https://mat1.gtimg.com/pingjs/ext2020/qqindex2018/dist/img/icons.png");
				background-position: 2px -195px;
			}
			.head{
				border: 1px solid #eee; /* 边框 */
				padding: 2px;/* 内边距 */
				border-radius: 50%;/*圆角 50% 纯圆*/
				width: 100px;
				height: 100px;
			}
			
			
		</style>
	</head>
	<body>
		<div class="icon-qzone"></div>
		<div class="icon-email"></div>
		<img class="head" src="img/head.jpeg" />
	</body>
</html>
